<template>
    <div>
        <p>
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
            </el-input>
        </p>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column type="index" label="#" width="70">
            </el-table-column>
            <el-table-column prop="order_number" label="订单编号">
            </el-table-column>
            <el-table-column prop="order_price" label="订单价格价格(元)">
            </el-table-column>
            <el-table-column prop="pay_status" label="下单时间">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.pay_status == 0 ? 'danger' : 'success'">{{
                        scope.row.pay_status == 0 ? '未付款' : '已付款'
                    }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="is_send" label="是否发货">
            </el-table-column>

            <el-table-column prop="add_time" label="下单时间">
                <template slot-scope="scope">
                    {{ new Date(scope.row.create_time * 1000).toLocaleString() }}
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit"
                        @click="handleEdit(scope.$index, scope.row)"></el-button>
                    <el-button size="mini" type="success" icon="el-icon-location"
                        @click="handleDelete(scope.$index, scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="from.pagenum" :page-sizes="[10, 20, 30, 40]" :page-size="from.pagesize"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!-- 修改地址 -->
        <el-dialog title="修改地址" :visible.sync="dialogFormVisible">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="省市区/县" prop="name">

                    <el-cascader style="width:100%;" :options="ruleForm.options" v-model="ruleForm.selectedOptions"
                        :props="{ expandTrigger: 'hover' }" @change="addressChoose"></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item style=" text-align: end">
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>

                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 时间线 -->
        <el-dialog title="物流信息" :visible.sync="dialogFormVisible1">
            <el-timeline :reverse="reverse">
                <el-timeline-item v-for="(item, index) in data" :key="index" :timestamp="item.time">
                    {{ item.context }}
                </el-timeline-item>
            </el-timeline>
        </el-dialog>
    </div>
</template>
<script>
import { getOrders, ordersSearch, ordersKuai } from '../untils/api'
import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode
} from "element-china-area-data";

export default {
    data() {
        return {
            input: '',
            tableData: [],
            reverse: false,
            activities: [],
            from: {
                query: '',
                pagenum: 1,
                pagesize: 10
            },
            total: 0,
            dialogFormVisible: false,
            dialogFormVisible1: false,
            ruleForm: {
                name: "",
                options: regionDataPlus,
                selectedOptions: [],
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            },
            data: [
                {
                    "time": "2018-05-10 09:39:00",
                    "ftime": "2018-05-10 09:39:00",
                    "context": "已签收,感谢使用顺丰,期待再次为您服务",
                    "location": ""
                },
                {
                    "time": "2018-05-10 08:23:00",
                    "ftime": "2018-05-10 08:23:00",
                    "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
                    "location": ""
                },
                {
                    "time": "2018-05-10 07:32:00",
                    "ftime": "2018-05-10 07:32:00",
                    "context": "快件到达 [北京海淀育新小区营业点]",
                    "location": ""
                },
                {
                    "time": "2018-05-10 02:03:00",
                    "ftime": "2018-05-10 02:03:00",
                    "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
                    "location": ""
                },
                {
                    "time": "2018-05-09 23:05:00",
                    "ftime": "2018-05-09 23:05:00",
                    "context": "快件到达 [北京顺义集散中心]",
                    "location": ""
                },
                {
                    "time": "2018-05-09 21:21:00",
                    "ftime": "2018-05-09 21:21:00",
                    "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
                    "location": ""
                },
                {
                    "time": "2018-05-09 13:07:00",
                    "ftime": "2018-05-09 13:07:00",
                    "context": "顺丰速运 已收取快件",
                    "location": ""
                },
                {
                    "time": "2018-05-09 12:25:03",
                    "ftime": "2018-05-09 12:25:03",
                    "context": "卖家发货",
                    "location": ""
                },
                {
                    "time": "2018-05-09 12:22:24",
                    "ftime": "2018-05-09 12:22:24",
                    "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
                    "location": ""
                },
                {
                    "time": "2018-05-08 21:36:04",
                    "ftime": "2018-05-08 21:36:04",
                    "context": "商品已经下单",
                    "location": ""
                }
            ]
        }
    },
    methods: {
        //搜索
        search() {
            this.from.query = this.input
            this.page()
            this.input = ''
        },
        addressChoose(value) {
            // console.log("地址", value);
            // console.log('省市区：', CodeToText[value[0]], CodeToText[value[1]], CodeToText[value[2]]);
        },
        handleEdit(index, row) {
            this.dialogFormVisible = true;

            // console.log(index, row);
        },
        handleDelete(index, row) {
            // console.log(row);
            this.dialogFormVisible1 = true
            // ordersKuai().then(res => {
            //     console.log(res);
            // })

            // console.log(index, row);
        },
        //分页
        handleSizeChange(val) {
            this.from.pagesize = val
            this.page()
            this.pageQie()
            // console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.from.pagenum = val
            this.page()
            this.pageQie()
            // console.log(`当前页: ${val}`);
        },
        // 修改
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        page() {
            getOrders(this.from).then(res => {
                // console.log(res);
                this.total = res.data.data.total
                this.tableData = res.data.data.goods
            })
        },
        pageQie() {
            this.page()
            this.tableData = this.tableData.slice((this.from.pagenum - 1) * this.from.pagesize, this.from.pagenum * this.from.pagesize)
        }
    },
    created() {
        this.page()
        this.pageQie()
    }
}
</script>
<style lang="scss" scoped>
p {
    width: 40%;
    display: flex;
    margin-bottom: 10px;

}
</style>


